<!DOCTYPE html>
<!-- saved from url=(0062)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/12-4-1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>消除QQ表情游戏</title>
<style>
body { background:#f1f1f1; font-family:微软雅黑; font-size:16px; user-select: none; }
#box { width:800px; height:450px; border:1px solid #066; background:#FFF; margin:20px auto 0; position:relative; top:0; left:0; }
#fraction { width:130px; border:1px solid #066; position:relative; top:-1px; left:-152px; background:#FFC; padding:10px; }
#fraction p { margin:0; font-family:微软雅黑; font-size:16px; line-height:30px; }

#alert { text-align:center; }
</style>
<script src="./消除QQ表情游戏1_files/miaov.js"></script><style type="text/css" adt="123"></style><style type="text/css" adt="123"></style>
<script>
window.onload = function() {
    var box = document.getElementById('box');
    var QQ = document.getElementById('qq');
    var fraction = document.getElementById('fraction');
    var aP = fraction.getElementsByTagName('p');
    var oAlert = document.getElementById('alert');
    var oBtn = oAlert.getElementsByTagName('input')[0];
    var num = 1;
    var score = 0;
    var losePoints = 0;
    var width = parseInt(getStyle(box, 'width'));
    var height = parseInt(getStyle(box, 'height'));
    var arrQQ = ['12-img/1.png', '12-img/2.png', '12-img/3.png', '12-img/4.png', '12-img/5.png', '12-img/6.png', '12-img/7.png', '12-img/8.png', '12-img/9.png', '12-img/10.png', '12-img/11.png'];
    oBtn.onclick = createImg;
    function createImg() {
        oBtn.disabled = true;
        oBtn.value = '游戏进行中……';
        var x = Math.round(Math.random() * (width - 24));
        var n = Math.floor(Math.random() * arrQQ.length);
        var aImg = document.getElementsByTagName('img');
        QQ.innerHTML = '<img style="filter:alpha(opacity:100); opacity:1; position:absolute; top:0px; left:' + x + 'px;" src="' + arrQQ[n] + '" />';
        doMove(aImg[0], 'top', num, height - 24,
        function() {
            aP[1].innerHTML = '失分：' + (++losePoints) + ' 分';
            if (losePoints < 10) {
                shake(box, 'top');
                createImg()
            } else {
                QQ.innerHTML = '';
                alert('失败了~~重新开始吧！');
                num = 1;
                score = 0;
                losePoints = 0;
                aP[1].innerHTML = '失分：0 分';
                aP[0].innerHTML = '得分：0 分';
                oBtn.disabled = false;
                oBtn.value = '开始游戏'
            }
        });
        aImg[0].onmousedown = function() {
            var that = this;
            that.src = 'img/qq.png';
            clearInterval(that.timer);
            aP[0].innerHTML = '得分：' + (++score) + ' 分';
            shake(that, 'left',
            function() {
                num++;
                createImg()
            })
        }
    }
};
</script>
</head>

<body>

<div id="alert">
	<h2>你的鼠标有多快？</h2>
  <p>游戏说明：点击“开始游戏”，随机掉下QQ表情，点中它，千万别让它掉下去！！</p>
  <input type="button" value="开始游戏">
</div>

<div id="box">
	<div id="fraction">
  	<p>得分：0 分</p>
  	<p>失分：0 分</p>
  </div>
  <div id="qq"></div>
</div>
</body>
</html>